<template>
  <div>
    <el-container class="main">
      <el-aside style="width: 200px;">
        <div class="title">文档管理</div>
        <div style="width: 100%; margin-top: 5%; font-size: 20px;">
          <tree-view
            :tree-data="treeData"
            v-model="ids"
            :options="options"
            @handle="handle"></tree-view>
        </div>
      </el-aside>
      <el-container>
        <el-header style="height: 70px; padding: 0;">
          <div style="height: 45px; padding-right: 20px;">
            <current-path></current-path>
            <user-info></user-info>
          </div>
          <dm-header @search="fileSearch" @files="findFilesByFolder"></dm-header>
        </el-header>
        <el-main>
          <div class="card">
            <dm-main :folder-id="folderId" :folder-path="folderPath" :files-data="filesData"></dm-main>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import dmHeader from './header/header'
  import TreeView from './aside/TreeView'
  import DmMain from './main'
  import UserInfo from './header/user/index'
  import currentPath from './header/currentPath/index'
  import {fileService} from '../service/fileService'

  export default {
    name: 'index',
    components: {
      DmMain,
      TreeView,
      dmHeader,
      UserInfo,
      currentPath
    },
    data () {
      return {
        ids: [4],
        options: {
          label: 'label',
          folderBold: false,
          idsWithParent: true,
          depthOpen: 2,
          openIcon: 'fa fa-angle-right',
          closeIcon: 'fa fa-angle-down',
          halfCheckedIcon: 'fa fa-minus-square-o fa-fw text-primary',
          checkedIcon: 'fa fa-check-square-o fa-fw text-danger',
          uncheckedIcon: 'fa fa-square-o fa-fw'
        },
        folderPath: '',
        filesData: []
      }
    },
    computed: mapState({
      treeData: state => state.folder.folderTree,
      folderId: state => state.folder.currentPath.folderId
    }),
    created () {
      let userId = this.$store.getters.userInfo.userId
      this.$store.commit('FIND_ALL_FOLDERS', userId)
    },
    methods: {
      handle (path, item) {
        this.folderPath = path
        this.$store.commit('SET_PATHS', {nextPath: path.split('/'), nextFolderId: item.id})
      },
      findFilesByFolder () {
        fileService.findFilesByFolder({
          userId: this.$store.getters.userInfo.userId,
          folderId: this.folderId
        }).then(res => {
          this.filesData = res.data.data
        }).catch(error => {
          console.log(error)
        })
      },
      fileSearch (file) {
        fileService.searchFile(file).then(res => {
          this.filesData = res.data.data
        }).catch(error => {
          console.log(error)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .main {
    height: 100vh;
    min-width: 800px;
    min-height: 100px;
    overflow: auto;
  }

  .card {
    min-height: 500px;
  }

  .title {
    line-height: 70px;
    background-color: #f0f2f5;
    font-size: 35px;
    text-align: center;
  }

  .el-header {
    background-color: white;
    border-bottom: 1px solid #d8dce5;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
  }

  .el-aside {
    background-color: #D3DCE6;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
